<script lang='ts' setup>
import { omit } from 'lodash-es';
import type {IconProps} from './types.d.ts';
import type { FontAwesomeIconProps } from "@fortawesome/vue-fontawesome";
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import { computed } from 'vue';
defineOptions({
    name: 'VkIcon',
    inheritAttrs: false // props 不向下传递,
})
const props = defineProps<IconProps>()
const filterProps = computed(():FontAwesomeIconProps => {
    // omit 方法可以过滤掉指定的属性
   return omit(props, ['type','color']) as any
})

const customStyle = computed(() => {
    return props.color ? {color: props.color} : {}
})
</script>
<template>
    <!-- 因为属性穿透设置了 inheritAttrs: false 所以这里的属性都不会向下传递，需要手动绑定$attrs -->
  
<i class="vk-icon" v-bind="$attrs" :class="{[`vk-icon--${type}`]:type}" :style="customStyle">
    <font-awesome-icon v-bind="filterProps" />
</i>
</template>
<style scoped lang='less'></style>